<template>
    <div>
        <div v-if="list.length">
            <h1>{{curQuestion.title}}</h1>
            <ul>
                <li v-for="(item,index) in curQuestion.options" :key="index" @click="chooseAnswer(index)">{{choose[index]}}.{{item}}</li>
            </ul>
            <div>
                <button v-show="curIndex!=0" @click="curIndex--">>左箭头</button>
                <button v-show="curIndex!=(list.length-1)" @click="curIndex++">右箭头</button>
            </div>
            <div>
                {{curIndex+1}}/{{list.length}}  
                <button @click="submit">交卷</button>
            </div>
        </div>
        <div class="dialog">
            <div>
                <span>共{{list.length}}</span>
                <span>未{{list.length-num}}</span>
                <span>已做{{num}}</span>
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios'

export default {
    data(){
        return {
            list:[], //题
            curIndex:0, //当前的题
            choose:['A','B','C','D'],
            answer:[]
        }
    },
    created(){
        axios.get('/api/question').then(res => {
            this.list = res.data.data
        })
    },
    computed:{
        curQuestion(){
            return this.list[this.curIndex]
        },
        num(){
            let num = 0;
            this.answer.forEach(item => {
                if(item){
                    num++;
                }
            })
            return num
        }
    },
    methods:{
        chooseAnswer(index){
            this.$set(this.answer,this.curIndex,this.choose[index]);
        },
        submit(){
            console.log(this.answer);
            axios.post('/api/submit',{answer:this.answer}).then(res => {
                console.log(res);
            })
        }
    }
}
</script>